function BBLoader( parentId , color , bgColor , speed , numElements , direction )
{
    //direction is 0 or 1(left/right)
    this.parent = document.getElementById( parentId );
    this.color = color;
    this.bgColor = bgColor;
    this.speed = speed;
    this.numElements = numElements || Math.floor(Math.random()*4)+2 ;
//possibilities for shape:
//-circle(default)
//-square
//-triangle
//- *.png image. Beware, it's going to be resized(depending on parent's size)
    
    this.loop = true ;
    
    this.width = this.parent.offsetWidth;
    this.height = this.parent.offsetHeight;
    
    window.requestAnimationFrame= window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    
    this.canvas = document.createElement("canvas");
//this id is quite unique I guess
    this.canvas.id = "BBLOADER"+Math.floor(Math.random()*10000000);
//fill parent
    this.canvas.style.width = "100%";
    this.canvas.style.height = "100%";
    this.canvas.style.backgroundColor = this.bgColor ;
    this.parent.appendChild( this.canvas );
//sets the minimum limit for canvas size
    if( this.canvas.offsetWidth < 20 || this.canvas.offsetHeight < 20 )
    {
        this.canvas.remove();
        alert( "Too small container!" );
        return false;
    }
    
    this.ctx=this.canvas.getContext("2d");
    this.ctx.fillStyle = this.bgColor ;
    this.ctx.strokeStyle = this.color ;
    
    
    this.draw = function(that)
    {
//console.log("BBLoader loop is running");//uncomment this and look @ the console to check if the loop's on
//clears whole canvas
        that.ctx.fillStyle = that.bgColor ;
        that.ctx.fillRect( 0 , 0 , that.canvas.width , that.canvas.height );
        /*  --- --- --- --- --- --- --- --- OUT OV TEMPLATE --- BEGIN --- --- --- --- --- --- --- --- --- */
        that.ctx.fillStyle = that.color ;
		that.ctx.beginPath();
		that.ctx.arc(that.canvas.width/2,that.canvas.height/2,that.size,0,Math.PI*2);
		that.ctx.fill();
        for( var i = 0 ; i < that.numElements ; ++i )
        {
			var dist = that.startingPoint;
			var maxdist = Math.sqrt( that.canvas.width*that.canvas.width + that.canvas.height*that.canvas.height );
			while( dist <= maxdist )
			{
				that.ctx.beginPath();
				var ang = that.angle + (Math.PI*2)/that.numElements*i;
				var x = dist * Math.sin( ang ) + that.canvas.width/2 ;
				var y = dist * Math.cos( ang ) + that.canvas.height/2 ;
				that.ctx.arc(x,y,that.size,0,Math.PI*2);
				dist += that.size*3 ;
				that.ctx.fill();
			}
            that.angle += that.speed/(300*that.numElements);
            that.angle %= Math.PI*2 ;
        }
		that.startingPoint += that.speed/15;
		that.startingPoint %= that.size*3 ;
        if( document.getElementById(that.canvas.id) === null )that.loop = false;
        /*  --- --- --- --- --- --- --- --- OUT OV TEMPLATE --- END --- --- --- --- --- --- --- --- --- */
        if( typeof(window.requestAnimationFrame) !== "function" )
            alert( "Your browser doesn't support modern animation devices. I guess you use Opera, Safari or old IE. Update your browser or get better/newer one. The old techniques of animating things aren't so good anymore and they're not woth to waste time on them, sorry. Let's be modern!" );
        else if( that.loop )
		{
			setTimeout(function(){
				window.requestAnimationFrame( function(){
					that.draw( that );
				});
			},1000/60);
			
		}
    }
    
    /*  --- --- --- --- --- --- --- --- OUT OV TEMPLATE --- BEGIN --- --- --- --- --- --- --- --- --- */
	this.startingPoint = 0;
    this.angle = 0;
    this.size = ( this.canvas.width > this.canvas.height ) ? this.canvas.height/20 : this.canvas.width/20 ;
    this.distance = ( this.canvas.width > this.canvas.height ) ? this.canvas.height/4 : this.canvas.width/4 ;
    
    this.direction = (typeof(direction) === "undefined") ? (Math.floor(Math.random()*2)) : direction ;
    this.direction = (this.direction) ? 1 : -1 ;
    this.draw( this );
    /*  --- --- --- --- --- --- --- --- OUT OV TEMPLATE --- END --- --- --- --- --- --- --- --- --- */
    
}
//parent id should be provided here, but, you can just go ahead and use removeChild() on that parent
//but, in fact, this is more secure tool and should be used anyway to avoid senseless loops
function deleteBBLoader( id )
{
    var items = document.getElementById( id ).getElementsByTagName("canvas");
    for( var i in items )
    {
        if( items[i] != undefined && 
                items[i].id != undefined && 
                items[i].id.substring(0,8) === "BBLOADER" && 
                !isNaN(items[i].id.substring(8)) )
        {
            document.getElementById( items[0].id ).remove();
        }
            
    }
    
}